fix(angular-query): call withDevtools function within injection conte… #9236

michaelbe812 · 2025-06-03T05:02:59Z

…xt to not throw

Bug description

@Injectable({ providedIn: 'root' })
class DevtoolsOptionsManager {
  loadDevtools = toSignal(
    fromEvent<KeyboardEvent>(document, 'keydown').pipe(
      map(
        (event): boolean =>
          event.metaKey && event.ctrlKey && event.shiftKey && event.key === 'D',
      ),
      scan((acc, curr) => acc || curr, false),
    ),
    {
      initialValue: false,
    },
  )
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideTanStackQuery(
      new QueryClient(),
      withDevtools(() => ({
        initialIsOpen: true,
        loadDevtools: inject(DevtoolsOptionsManager).loadDevtools(),
      })),
    ),
  ],
}

will throw a runtime error that inject must be called from within an injection context.

nx-cloud · 2025-06-03T05:03:31Z

View your CI Pipeline Execution ↗ for commit e0cb4c8.

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	2m 20s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	11s	View ↗

☁️ Nx Cloud last updated this comment at 2025-06-04 05:45:50 UTC

pkg-pr-new · 2025-06-03T05:04:48Z

More templates

@tanstack/angular-query-devtools-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@9236

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@9236

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@9236

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@9236

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@9236

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@9236

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@9236

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@9236

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@9236

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@9236

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@9236

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@9236

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@9236

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@9236

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@9236

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@9236

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@9236

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@9236

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@9236

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@9236

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@9236

commit: e0cb4c8

codecov · 2025-06-03T05:07:18Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 85.98%. Comparing base (058bfc9) to head (e0cb4c8).
Report is 9 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #9236       +/-   ##
===========================================
+ Coverage   45.33%   85.98%   +40.64%     
===========================================
  Files         207       16      -191     
  Lines        8271      321     -7950     
  Branches     1860       75     -1785     
===========================================
- Hits         3750      276     -3474     
+ Misses       4080       40     -4040     
+ Partials      441        5      -436

Components	Coverage Δ
@tanstack/angular-query-devtools-experimental	`∅ <ø> (∅)`
@tanstack/angular-query-experimental	`85.09% <100.00%> (+0.09%)`	⬆️
@tanstack/eslint-plugin-query	`∅ <ø> (∅)`
@tanstack/query-async-storage-persister	`∅ <ø> (∅)`
@tanstack/query-broadcast-client-experimental	`∅ <ø> (∅)`
@tanstack/query-codemods	`∅ <ø> (∅)`
@tanstack/query-core	`∅ <ø> (∅)`
@tanstack/query-devtools	`∅ <ø> (∅)`
@tanstack/query-persist-client-core	`∅ <ø> (∅)`
@tanstack/query-sync-storage-persister	`∅ <ø> (∅)`
@tanstack/query-test-utils	`∅ <ø> (∅)`
@tanstack/react-query	`∅ <ø> (∅)`
@tanstack/react-query-devtools	`∅ <ø> (∅)`
@tanstack/react-query-next-experimental	`∅ <ø> (∅)`
@tanstack/react-query-persist-client	`∅ <ø> (∅)`
@tanstack/solid-query	`∅ <ø> (∅)`
@tanstack/solid-query-devtools	`∅ <ø> (∅)`
@tanstack/solid-query-persist-client	`∅ <ø> (∅)`
@tanstack/svelte-query	`∅ <ø> (∅)`
@tanstack/svelte-query-devtools	`∅ <ø> (∅)`
@tanstack/svelte-query-persist-client	`∅ <ø> (∅)`
@tanstack/vue-query	`∅ <ø> (∅)`
@tanstack/vue-query-devtools	`∅ <ø> (∅)`

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

michaelbe812 · 2025-06-03T05:09:15Z

Just have to think about how to write a test case for it - help welcome :)

…xt to not throw

arnoud-dv · 2025-06-04T20:42:48Z

I don't think a computation function should use inject, which is why I removed runInInjectionContext, forgetting that it breaks the use case and my own example code.

There's good reasons Angular doesn't run computed and such in the injection context. inject should run once something (a component, service, provider etc.) is initialized and not getting the injectable continuously during the "something" its lifetime. But I do want to support using a value from an injectable. I got a devtools branch locally which allows injectables to be used as such:

export const appConfig: ApplicationConfig = {
  providers: [
    provideTanStackQuery(
      new QueryClient(),
      withDevtools(
        (devToolsOptionsManager: DevtoolsOptionsManager) => ({
          loadDevtools: devToolsOptionsManager.loadDevtools(),
        }),
        {
          // `deps` can be used to pass one or more injectables as parameters to the `withDevtools` callback.
          deps: [DevtoolsOptionsManager],
        },
      ),
    ),
  ],
}

It's similar to the Angular deps mechanism in providers. Like with Angular deps the parameter does need explicit typing. What do you think about this API?

It is possible to add type inference to the Angular adapter's types btw, but because of TypeScript limitations it would need a separate overload per number of deps array items. Which is kind of clunky and why I choose not to add that for now.

The branch also adds conditional exports which greatly improves tree shaking and other devtools improvements. Haven't touched it in a month, I'll review it a bit and see if I can open a PR.

michaelbe812 · 2025-06-05T13:27:21Z

I don't think a computation function should use inject, which is why I removed runInInjectionContext, forgetting that it breaks the use case and my own example code.

There's good reasons Angular doesn't run computed and such in the injection context. inject should run once something (a component, service, provider etc.) is initialized and not getting the injectable continuously during the "something" its lifetime. But I do want to support using a value from an injectable. I got a devtools branch locally which allows injectables to be used as such:
export const appConfig: ApplicationConfig = {
  providers: [
    provideTanStackQuery(
      new QueryClient(),
      withDevtools(
        (devToolsOptionsManager: DevtoolsOptionsManager) => ({
          loadDevtools: devToolsOptionsManager.loadDevtools(),
        }),
        {
          // `deps` can be used to pass one or more injectables as parameters to the `withDevtools` callback.
          deps: [DevtoolsOptionsManager],
        },
      ),
    ),
  ],
}
It's similar to the Angular deps mechanism in providers. Like with Angular deps the parameter does need explicit typing. What do you think about this API?

It is possible to add type inference to the Angular adapter's types btw, but because of TypeScript limitations it would need a separate overload per number of deps array items. Which is kind of clunky and why I choose not to add that for now.

The branch also adds conditional exports which greatly improves tree shaking and other devtools improvements. Haven't touched it in a month, I'll review it a bit and see if I can open a PR.

Hey I generally agree with everything especially the part regarding computed.

For me personally this API looks fine. I do not see any major advantages or disadvantages of having another syntax. It does the job and it should be quite understandable.

arnoud-dv · 2025-06-05T14:40:54Z

Cool thanks, gives me confidence to move forward with this. API design, thinking of many use cases and avoiding future breaking changes is hard 😅

michaelbe812 · 2025-06-06T05:13:02Z

Cool thanks, gives me confidence to move forward with this. API design, thinking of many use cases and avoiding future breaking changes is hard 😅

Agree - This is a complete different discipline :)

github-actions bot added the package: angular-query-experimental label Jun 3, 2025

fix(angular-query): call withDevtools function within injection conte…

e0cb4c8

…xt to not throw

michaelbe812 force-pushed the fix/withdevtools-throws branch from b052807 to e0cb4c8 Compare June 4, 2025 05:42

michaelbe812 closed this Jun 5, 2025

michaelbe812 deleted the fix/withdevtools-throws branch June 5, 2025 13:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(angular-query): call withDevtools function within injection conte… #9236

fix(angular-query): call withDevtools function within injection conte… #9236

Uh oh!

michaelbe812 commented Jun 3, 2025

Uh oh!

nx-cloud bot commented Jun 3, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Jun 3, 2025 •

edited

Loading

Uh oh!

codecov bot commented Jun 3, 2025 •

edited

Loading

Uh oh!

michaelbe812 commented Jun 3, 2025

Uh oh!

arnoud-dv commented Jun 4, 2025

Uh oh!

michaelbe812 commented Jun 5, 2025

Uh oh!

arnoud-dv commented Jun 5, 2025

Uh oh!

michaelbe812 commented Jun 6, 2025

Uh oh!

Uh oh!

Uh oh!

fix(angular-query): call withDevtools function within injection conte… #9236

fix(angular-query): call withDevtools function within injection conte… #9236

Uh oh!

Conversation

michaelbe812 commented Jun 3, 2025

Bug description

Uh oh!

nx-cloud bot commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

michaelbe812 commented Jun 3, 2025

Uh oh!

arnoud-dv commented Jun 4, 2025

Uh oh!

michaelbe812 commented Jun 5, 2025

Uh oh!

arnoud-dv commented Jun 5, 2025

Uh oh!

michaelbe812 commented Jun 6, 2025

Uh oh!

Uh oh!

nx-cloud bot commented Jun 3, 2025 •

edited

Loading

pkg-pr-new bot commented Jun 3, 2025 •

edited

Loading

codecov bot commented Jun 3, 2025 •

edited

Loading